<template>
	<view class="page">
		<view class="search-box">
			<input v-model="keyword" placeholder="请输入客户名称、手机号进行搜索" />
			<text class="search-btn" @click="onSearch">搜索</text>
		</view>
		<view class="list">
			<view v-for="item in filteredList" :key="item.id" class="item" @click="toDetail(item.customerId)" v-if="number!==0">
				<view class="item-img">头像</view>
				<view class="item-detail">
					<text class="name">{{item.customerName}}</text>
					<text class="phone">{{item.phoneNumber}}</text>
				</view>
				<image src="../../static/you.png" class="item-you"></image>
			</view>
			<view v-if="number===0"  style="margin-top: 50rpx;text-align: center;background-color: #f6f7f9;">暂无结果</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {customerMock,fetchCustomerList} from '../../api/customer.js'

	const keyword = ref('')

	const customers = ref([])
	const number = computed(() => filteredList.value.length)
	const filteredList = computed(() =>
		customers.value.filter(v =>
			v.customerName.includes(keyword.value) || v.phoneNumber.includes(keyword.value)
		)
	)

	function onSearch() {} // 已用 computed 实时过滤
	function toDetail(id) {
		uni.navigateTo({
			url: `/pages/customerManage/customerDetail/customerDetail?id=${id}`
		})
	}
	onMounted(async()=>{
		const res=await fetchCustomerList({
		})
		console.log('客户列表信息：',res)
		customers.value = res.data.records
	})
</script>

<style>
	.page {
		background: #f6f7f9;
		min-height: 100vh;
	}

	.search-box {
		display: flex;
		padding: 20rpx;
		background: #fff;
	}

	.search-box input {
		flex: 1;
		padding: 16rpx;
		border: 1rpx solid #dcdfe6;
		border-radius: 12rpx;
	}

	.search-btn {
		margin-left: 20rpx;
		padding: 16rpx 24rpx;
		background: #aa0000;
		color: #fff;
		border-radius: 12rpx;
	}

	.list {
		padding: 0 20rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		margin-top: 20rpx;
		background: #fff;
		border-radius: 16rpx;
	}

	.item-img {
		width: 150rpx;
		height: 100rpx;
	}

	.item-detail {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.item-you {
		width: 50rpx;
		height: 50rpx;
	}

	.name {
		font-size: 32rpx;
		color: #333;
	}

	.phone {
		font-size: 28rpx;
		color: #666;
	}
</style>